<template>
  <div>
    <el-form-item label="输入文件格式" label-width="120px">
      <el-radio-group v-model="titleInfo.type">
        <el-radio v-for="item in outFileType" :key="item" :label="item">{{ item }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="保存路径" label-width="120px">
      <el-radio-group v-model="place" class="d-flex ai-center">
        <el-radio v-for="(item, i) in exportPlace" :key="i" :label="item">{{ item }}</el-radio>
        <el-input
          v-if="place != '原始文件夹'"
          v-model="titleInfo.output"
          @click="setDic"
        ></el-input>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
import { outFileType, exportPlace, outPutDto } from './tool'
import { defineProps, PropType, reactive, watch, watchEffect } from 'vue'

import { ref } from 'vue'

const place = ref('原始文件夹')

const props = defineProps({
  title: {
    type: Object as PropType<outPutDto>,
    default: () => {
      return {
        type: 'mp4',
        output: ''
      }
    }
  }
})
console.log('title', props, props.title)
const titleInfo = ref(props.title)
console.log('titleInfo1', titleInfo)
watch(
  () => titleInfo,
  () => {
    console.log('titleInfo2', titleInfo.value)
  }
)

async function setDic() {
  const res = await window.electron.ipcRenderer.invoke('selectDic')
  // eslint-disable-next-line vue/no-mutating-props
  titleInfo.value.output = res
}
// 更换文件路径
function changePlace() {
  if (place.value == '原始文件夹') {
    // eslint-disable-next-line vue/no-mutating-props
    titleInfo.value.output = ''
  } else {
    setDic()
  }
}
// 监听
watchEffect(changePlace)
</script>

<style lang="less" scoped></style>
